<template>
  <div id="admin_hosp">
    <CommonTable
      :query-api="'/hospital/hospRegisterInfoPage'"
      :query-params="param"
      :columns="columns"
      @search-finish="searchFinish"
      ref="hospRef"
      name="admin_hosp_table"
    >
      <template #tableSearchForm>
        <a-form id="internal_drawer_form_model" :model="formInfo" layout="inline">
          <a-form-item label="医院信息">
            <a-input
              v-model:value="formInfo.hospInfo"
              placeholder="医院信息"
              allowClear
              style="width: 200px"
            ></a-input>
          </a-form-item>
          <a-form-item label="审核状态">
            <a-select
              v-model:value="formInfo.verified"
              style="width: 140px"
              popupClassName="common_select_dropdown"
            >
              <a-select-option :value="''" :key="''">全部</a-select-option>
              <a-select-option :value="'false'" :key="'false'">未审核</a-select-option>
              <a-select-option :value="'true'" :key="'true'">已审核</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item class="filter_footer" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
            <a-space>
              <a-button type="primary" @click="onSerach()" :loading="loading" :disabled="loading"
                >查询</a-button
              >
              <a-button @click="resetForm" :loading="loading" :disabled="loading">重置</a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </template>
      <template #otherAction="{ record }">
        <a-space>
          <a-button size="small" @click="updateRecord(record)">修改</a-button>
          <a-button size="small" @click="auditRecord(record)">审核</a-button>
          <a-button size="small" @click="enterDevice(record)">设备</a-button>
        </a-space>
      </template>
    </CommonTable>
    <AuditModal ref="auditRef" @get-page="onSerach"></AuditModal>
    <UpdateModal
      ref="updateRef"
      :hospList="hospList"
      :keywordList="keywordList"
      @get-page="onSerach"
    ></UpdateModal>
  </div>
</template>
<script lang="ts" setup>
import CommonTable from '@/components/common_table/index.vue'
import type { TColumn } from '@/components/common_table/type'
import { getAllHospList, getKeywordList } from '@/axios/api/options_api'
import type { OptionsType, ListType } from '@/axios/api/type'
import { ref, h, onMounted, watch, onBeforeUnmount } from 'vue'
import type { FromType } from './type.ts'
import { cloneDeep, find } from 'lodash-es'
import UpdateModal from './update_modal.vue'
import AuditModal from './audit_modal.vue'

import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const hospRef = ref()
const updateRef = ref()
const auditRef = ref()

const columns = ref<TColumn[]>([
  {
    title: '医院名称',
    dataIndex: 'hospName',
    key: 'hospName',
    ellipsis: true,
    width: 200,
    fixed: 'left',
    showCol: true
  },
  {
    title: '医院编码',
    dataIndex: 'userAccount',
    key: 'userAccount',
    width: 120,
    ellipsis: true,
    fixed: 'left',
    showCol: true
  },
  {
    title: '法定代表人',
    dataIndex: 'legalPersonName',
    key: 'legalPersonName',
    align: 'center',
    width: 120,
    ellipsis: true,
    showCol: true
  },
  {
    title: '联系电话',
    dataIndex: 'hospPhone',
    key: 'hospPhone',
    align: 'center',
    width: 180,
    ellipsis: true,
    showCol: true
  },
  {
    title: '医院等级',
    dataIndex: 'hospGradeStr',
    key: 'hospGradeStr',
    align: 'center',
    ellipsis: true,
    width: 120,
    showCol: true
  },
  {
    title: '医院地址',
    dataIndex: 'hospAddress',
    key: 'hospAddress',
    align: 'center',
    width: 180,
    ellipsis: true,
    showCol: true
  },
  {
    title: '执业范围',
    dataIndex: 'hospPracticeScope',
    key: 'hospPracticeScope',
    width: 180,
    ellipsis: true,
    align: 'center',
    showCol: true
  },
  {
    title: '切面关键词',
    key: 'keywordType',
    dataIndex: 'keywordType',
    width: 100,
    align: 'center',
    customRender: ({ text }) => {
      if (text) {
        return find(keywordList.value, function (a) {
          return a.value === text
        })?.label
      } else {
        return '默认'
      }
    },
    showCol: true
  },
  {
    title: '审核状态',
    width: 100,
    fixed: 'right',
    align: 'center',
    key: 'userVerified',
    dataIndex: 'userVerified',
    customRender: ({ text }) => {
      if (text) {
        return h(
          'span',
          {
            style: {
              color: 'green'
            }
          },
          '已审核'
        )
      } else {
        return h(
          'span',
          {
            style: {
              color: 'red'
            }
          },
          '未审核'
        )
      }
    },
    showCol: true
  },
  {
    fixed: 'right',
    title: '操作',
    width: 190,
    key: 'action',
    align: 'center',
    showCol: true
  }
])
const formInfo = ref<FromType>({
  hospInfo: '',
  verified: ''
})
const param = ref<FromType>({
  ...cloneDeep(formInfo.value),
  verified: formInfo.value.verified ? JSON.parse(formInfo.value.verified.toString()) : ''
})
const loading = ref(false)
const hospList = ref<OptionsType[]>([])
const keywordList = ref<ListType[]>([])
async function getOptionList() {
  const hospInfo = await getAllHospList().catch(() => {
    return {
      code: 400,
      data: []
    }
  })
  hospList.value = hospInfo.data
  const keyInfo = await getKeywordList().catch(() => {
    return {
      code: 400,
      data: []
    }
  })
  keywordList.value = keyInfo.data
  onSerach()
}
function enterDevice(record: any) {
  router.push({
    path: '/admin/device',
    query: {
      hospId: record.hospId,
      hospCode: record.hospCode
    }
  })
}
function updateRecord(record: any) {
  console.log('%c [ updateRecord ]-236', 'font-size:13px; background:pink; color:#bf2c9f;')
  if (updateRef.value) {
    updateRef.value.showModal(record)
  }
}
function auditRecord(record: any) {
  console.log(
    '%c [ record ]-241',
    'font-size:13px; background:pink; color:#bf2c9f;',
    auditRef.value
  )
  if (auditRef.value) {
    auditRef.value.showModal(record)
  }
}
const stopFormWatcher = watch(
  formInfo,
  () => {
    param.value = cloneDeep(formInfo.value)
    param.value.verified = formInfo.value.verified
      ? JSON.parse(formInfo.value.verified.toString())
      : ''
  },
  {
    deep: true
  }
)
function searchFinish() {
  loading.value = false
}
function resetForm() {
  formInfo.value = {
    hospInfo: '',
    verified: ''
  }
  param.value = {
    hospInfo: '',
    verified: ''
  }
  onSerach()
}
function onSerach() {
  if (hospRef.value) {
    hospRef.value.getPage(param.value)
  }
}
onMounted(() => {
  getOptionList()
})
onBeforeUnmount(() => {
  stopFormWatcher()
})
</script>
<style lang="scss" scoped>
#admin_hosp {
  @include w-h-cover();
}
</style>
